<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Complex Layout</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/color.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/demo/demo.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		function addPanel(obj, title) {
			$(".easyui-accordion .easyui-linkbutton").css({ background : "#FFFFFF" });
			$(obj).css({ background : "#b7d2ff" });
			if(!$('#tab').tabs('exists', title)) {
				$('#tab').tabs('add', {
					title : title,
					href : '${pageContext.request.contextPath}/page/easyui/FoodTypeList.jsp',
					closable : true
				});
			}
		}
		
		function closeAllTab() {
			var tab = $('#tab').tabs('getSelected');
            if (tab){
                var index = $('#tab').tabs('getTabIndex', tab);
                $('#tab').tabs('close', index);
                closeAllTab();
            }
		}
	</script>
</head>
<body>
	<div class="easyui-layout" style="width: 100%; height: 600px;">
		<!-- <div data-options="region:'north'" style="height: 50px"></div> -->
		<!-- <div data-options="region:'south',split:true" style="height: 50px;"></div> -->
		<!-- <div data-options="region:'east',split:true" title="East" style="width: 180px;">
			<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
		</div> -->
		<div data-options="region:'west',split:true" title="导航菜单" style="width: 150px;">
			<div class="easyui-accordion" data-options="fit:true,border:false">
				<div title="食材类别管理" data-options="iconCls:'icon-ok'" style="padding: 10px; color: red;">
					<table width="100%">
						<tr><td><a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel(this, '食材类别')" data-options="plain:true, iconCls:'icon-search'" style="width: 100%; text-align: left;">食材类别</a></td></tr>
						<tr><td><a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel(this, '食材类别类别')" data-options="plain:true, iconCls:'icon-search'" style="width: 100%; text-align: left;">食材类别类别</a></td></tr>
					</table>
				</div>
				<div title="Title2" data-options="iconCls:'icon-ok'" style="padding: 10px;">content2</div>
				<div title="Title3" data-options="iconCls:'icon-ok'" style="padding: 10px">content3</div>
			</div>
		</div>
		<div data-options="region:'center' ,iconCls:'icon-ok'">
			<div id="tab" class="easyui-tabs" data-options="fit:true, border:false, tools:'#tab-tools'">
				<div title="About" style="padding: 10px"></div>
				<div title="DataGrid" style="padding: 5px"></div>
			</div>
		</div>

		<div id="tab-tools">
			<!-- <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a> -->
			<a href="javascript:void(0)" title="关闭全部" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="closeAllTab()"></a>
		</div>
	</div>
</body>
</html>